<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html debug="true">
<!---
<head>
	<title>projectshen:tasks</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
	<cfset myself = viewstate.getValue("myself") />
	<cfset projectId = viewstate.getValue("projectId") />
	<style>
		@import "/srvinc/js/dojo-trunk/dojox/grid//_grid/tundraGrid.css";
		@import "/srvinc/js/dojo-trunk/dojo/resources/dojo.css";
		@import "/srvinc/js/dojo-trunk/dijit/themes/nihilo/nihilo.css";
/*
		@import "/srvinc/js/dojo-trunk/dijit/themes/tundra/tundra.css";
*/
		@import "/srvinc/js/dojo-trunk/dijit/tests/css/dijitTests.css";

		.grid {
			height: 30em;
		}

		.priority_high .dojoxGrid-cell {
			background-color: pink;
		}

		.priority_highest .dojoxGrid-cell {
			background-color: red;
		}

		.status_closed .dojoxGrid-cell {
			color: dimgray;
		}

.dojoxGrid-rowbar-over {
	background-image: none;
	background-color: white;
	border-top-color: #FEBE47;
	border-bottom-color: #FEBE47;
	border-bottom-width: 2px;
	padding-bottom: 0;
}

.dojoxGrid-row-over {
	border-top-color: #FEBE47;
	border-bottom-color: #FEBE47;
	border-bottom-width: 2px;
	padding-bottom: 0;
	/*background-color: #FFDD9D;*/
	/*background-color: #FDFDFD;*/
}

	</style>

	<script type="text/javascript" src="/srvinc/js/dojo-trunk/dojox/grid/tests/../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true"></script>
	<script type="text/javascript" src="/srvinc/js/dojo-trunk/dojox/grid/tests/../../../dijit/tests/_testCommon.js"></script>
	<script type="text/javascript">
		dojo.require("dojox.grid.Grid");
		dojo.require("dojox.grid._data.model");
		dojo.require("dojox.grid._data.dijitEditors");
		dojo.require("dojox.grid.tests.databaseModel");
		dojo.require("dojo.parser");
		dojo.require("dijit.layout.ContentPane");
		dojo.require("dijit.Dialog");
//ticket stuff
		dojo.require("dijit.form.Form");
		dojo.require("dijit.form.ValidationTextBox");
		dojo.require("dijit.form.ComboBox");
		dojo.require("dijit.form.FilteringSelect");
		dojo.require("dijit.TitlePane");
		dojo.require("dijit.layout.SplitContainer");
    dojo.require("dojo.data.ItemFileReadStore");
    dojo.require("dijit.Tree");
		dojo.addOnLoad(function(){
		    dojo.extend(dijit.Dialog,{
		         setTitle: function(/*string*/title){
		             this.titleNode.innerHTML = title || "";
		         }
		    });
		});
	</script>
	<!-- Debugging -->
	<!--
	<script type="text/javascript" src="/srvinc/js/dojo-trunk/dojox/grid/tests/../_grid/lib.js"></script>
	<script type="text/javascript" src="/srvinc/js/dojo-trunk/dojox/grid/tests/../_grid/drag.js"></script>
	<script type="text/javascript" src="/srvinc/js/dojo-trunk/dojox/grid/tests/../_grid/scroller.js"></script>
	<script type="text/javascript" src="/srvinc/js/dojo-trunk/dojox/grid/tests/../_grid/builder.js"></script>
	<script type="text/javascript" src="/srvinc/js/dojo-trunk/dojox/grid/tests/../_grid/cell.js"></script>
	<script type="text/javascript" src="/srvinc/js/dojo-trunk/dojox/grid/tests/../_grid/layout.js"></script>
	<script type="text/javascript" src="/srvinc/js/dojo-trunk/dojox/grid/tests/../_grid/rows.js"></script>
	<script type="text/javascript" src="/srvinc/js/dojo-trunk/dojox/grid/tests/../_grid/focus.js"></script>
	<script type="text/javascript" src="/srvinc/js/dojo-trunk/dojox/grid/tests/../_grid/selection.js"></script>
	<script type="text/javascript" src="/srvinc/js/dojo-trunk/dojox/grid/tests/../_grid/edit.js"></script>
	<script type="text/javascript" src="/srvinc/js/dojo-trunk/dojox/grid/tests/../_grid/view.js"></script>
	<script type="text/javascript" src="/srvinc/js/dojo-trunk/dojox/grid/tests/../_grid/views.js"></script>
	<script type="text/javascript" src="/srvinc/js/dojo-trunk/dojox/grid/tests/../_grid/rowbar.js"></script>
	<script type="text/javascript" src="/srvinc/js/dojo-trunk/dojox/grid/tests/../_grid/publicEvents.js"></script>
	<script type="text/javascript" src="/srvinc/js/dojo-trunk/dojox/grid/tests/../VirtualGrid.js"></script>
	<script type="text/javascript" src="/srvinc/js/dojo-trunk/dojox/grid/tests/../_data/fields.js"></script>
	<script type="text/javascript" src="/srvinc/js/dojo-trunk/dojox/grid/tests/../_data/model.js"></script>
	<script type="text/javascript" src="/srvinc/js/dojo-trunk/dojox/grid/tests/../_data/editors.js"></script>
	<script type="text/javascript" src="/srvinc/js/dojo-trunk/dojox/grid/tests/../_data/dijitEditors.js"></script>
	<script type="text/javascript" src="/srvinc/js/dojo-trunk/dojox/grid/tests/../Grid.js"></script>
	<script type="text/javascript" src="/srvinc/js/dojo-trunk/dojox/grid/tests/databaseModel.js"></script>
	-->
	<script type="text/javascript">
		var model = new dojox.grid.data.DbTable(null, null, '<cfoutput>#myself#</cfoutput>ticket.grid.data', "test", "testtbl");
		// simple display of row info; based on model observing.
		modelChange = function() {
			dojo.byId('rowCount').innerHTML = model.count + ' row(s)';
		}
		model.observer(this);
		
		// yay, let's deal with MySql date types, at least a little bit...
		// NOTE: supports only default date formatting YYYY-MM-DD HH:MM:SS or YY-MM-DD HH:MM:SS
		mysqlDateToJsDate = function(inMysqlDateTime, inDateDelim, inTimeDelim) {
			var dt = inMysqlDateTime.split(' '), d = dt[0], t = dt[1], r;
			d = d&&d.split(inDateDelim||'-');
			t = t&&t.split(inTimeDelim||':');
			if (d && d.length == 3) {
				r = new Date();
				r.setYear(d[0]);
				r.setMonth(parseInt(d[1])-1);
				r.setDate(d[2]);
			}
			if (t && t.length == 3) {
				r = r || new Date();
				r.setHours(t[0]);
				r.setMinutes(t[1]);
				r.setSeconds(t[2]);
			}
			return r || new Date(inMysqlDateTime);
		}
		
		jsDateToMySqlDate = function(inDate) {
			var
				d = new Date(inDate),
				y = d.getFullYear(),
				m = dojo.string.pad(d.getMonth() + 1),
				dd = dojo.string.pad(d.getDate())
			return dojo.string.substitute("${0}-${1}-${2}",[y, m, dd]);
		};
		
		// custom simple MySql date formatter
		formatMySqlDate = function(inDatum) {
			return inDatum != dojox.grid.na ? dojo.date.locale.format(mysqlDateToJsDate(inDatum), this.constraint) : dojox.grid.na;
		}
		
		// custom simple MySql date editor
		dojo.declare("mySqlDateEditor", dojox.grid.editors.DateTextBox, {
			format: function(inDatum, inRowIndex){
				inDatum = mysqlDateToJsDate(inDatum);
				return this.inherited(arguments, [inDatum, inRowIndex]);
			},
			getValue: function(inRowIndex){
				var v = this.editor.getValue(), fv = jsDateToMySqlDate(v);
				return fv;
			}
		});
		
		var gridLayout = [ 
			{ type: "dojox.GridRowView", width: "20px" },
			{
			defaultCell: { width: 6 /*, editor: dojox.grid.editors.Dijit*/ }, 
			cells: [[
				{ name: 'Mark', width: 3, styles: 'text-align: center;', editor: dojox.grid.editors.Bool },
				{ name: 'Id',  width: 4, styles: 'text-align: right;', editorClass: "dijit.form.NumberTextBox" }, 
				{ name: 'Name', width: 20},
				{ name: 'Priority', styles: 'text-align: center;', editor: dojox.grid.editors.Select, options: ["normal", "high", "low"]},
				{ name: 'priorityorder', 
					editor: dojox.grid.editors.Dijit,
					editorClass: "dijit.form.NumberSpinner" },
				{ name: 'Estimated Hours',  width: 4, styles: 'text-align: right;', editorClass: "dijit.form.NumberTextBox" }, 
				{ name: 'Status', styles: 'text-align: center;', editor: dojox.grid.editors.Select, options: ["assigned", "closed", "new"]},
				{ name: 'Date', 
					editor: mySqlDateEditor, 
					formatter: formatMySqlDate, 
					constraint: {selector: "date"}, 
					width: 10, 
					styles: 'text-align:right;'}
			]]}
		];


		function waitMessage() {
			alert('Edit in progress, please wait.');
		}
		
		function getDefaultRow() {
			return ['', '', '', jsDateToMySqlDate(new Date())];
		}
		function addRow() {
			if(model.canModify()){
				grid.addRow(getDefaultRow());
			}else{
				waitMessage();
			}
		}
		
		function removeSelected(){
			if(model.canModify()){
				grid.removeSelectedRows();
			}else{
				waitMessage();
			}
		}

		function onStyleRow(inRow) {
			with (inRow) {
				if (odd)
					customStyles += ' color: orange;';
				if (selected)	
					customClasses += ' selectedRow';
				if (model.getRow(inRow.index).id == 3)
					alert('hi');
				if (over)	
					customClasses += ' overRow';
				if (!over && !selected)
					dojox.Grid.prototype.onStyleRow.apply(this, arguments);
			}	
		}

function colorDescriptions(inRow) {
   if (model.getRow(inRow.index) == undefined)
      return;
   if (model.getRow(inRow.index)[3] == 'high') {
      //inRow.customStyles = 'color:red';
      inRow.customClasses = 'priority_high';
   }
   if (model.getRow(inRow.index)[3] == 'highest') {
      //inRow.customStyles = 'color:red';
      inRow.customClasses = 'priority_highest';
   }
   if (model.getRow(inRow.index)[6] == 'closed') {
      //inRow.customStyles = 'color:red';
      inRow.customClasses = 'status_closed';
   }
   if (model.getRow(inRow.index)[6] == 'new') {
      inRow.customStyles = 'color:blue';
   }
}

	function sayHi(row) {
	//  alert('hi '+row.rowIndex); 
	//  alert(': id=' + model.getRow(row.rowIndex)[1]);
		if(row.cellIndex == 2) {
			openTicketDialog(model.getRow(row.rowIndex)[1]);
		}
	}

	var thirdDlg;
	function openTicketDialog(ticketId) {
		if(!thirdDlg){	
			var pane = dojo.byId('thirdDialog');
			pane.style.width = "300px"; 	
			thirdDlg = new dijit.Dialog({
				id: "dialog3",
				title: "Programatic Dialog Creation"
			},pane);
		}
		thirdDlg.setTitle("Ticket <strong>"+ ticketId + "</strong>");
		thirdDlg.setHref('<cfoutput>#myself#ticket.edit&projectId=#projectId#&ticketid=</cfoutput>'+ticketId);
		thirdDlg.show();
	}

	</script>
</head>
--->
<body>

	<div id="mainTabContainer" dojoType="dijit.layout.TabContainer">
		<div id="tab1" dojoType="dijit.layout.ContentPane" title="Tickets">
		<div dojoType="dijit.Dialog" id="rowOpsDialog" title="First Dialog">
			<button onclick="addRow();dijit.byId('rowOpsDialog').hide();">Add Row</button>&nbsp;&nbsp;
			<button onclick="removeSelected();dijit.byId('rowOpsDialog').hide();">Remove Selected</button>&nbsp;&nbsp;
			<button onclick="grid.edit.apply();dijit.byId('rowOpsDialog').hide();">Apply Edit</button>&nbsp;&nbsp;
			<button onclick="grid.edit.cancel();dijit.byId('rowOpsDialog').hide();">Cancel Edit</button>&nbsp;&nbsp;
			<button onclick="grid.refresh();dijit.byId('rowOpsDialog').hide();">Refresh</button>
		</div>
		<div id="thirdDialog" style="display: none; width: 400px; height: 400px;"></div>
	<input type="text" name="ticketsummary" onkeyup="search_delay(this)" />
		<div jsId="grid" id="grid" class="grid" structure="gridLayout" onStyleRow="colorDescriptions" dojoType="dojox.Grid" model="model" singleClickEdit="true" autoWidth="true" onCellClick="sayHi" style="height:500px">
    <script type="dojo/connect" event="onCellContextMenu">
			dijit.byId('rowOpsDialog').show();
//			dojo.connect(grid, "onCellContextMenu", showTooltip);
//			dojo.connect(grid, "onCellMouseOut", hideTooltip);
//	//		menu = dijit.byId('gridMenu');
////			dojo.connect(this,showTooltip);
        // advanced behavior here
    </script>		
		</div>
		<div id="rowCount"></div>

		</div>

	</div>


<!---
  <div dojoType="dijit.Menu" id="gridMenu"
           targetNodeIds="grid,tab1" style="display: none;">
          <div dojoType="dijit.MenuItem" iconClass="myIcon"
               onClick="alert('Hello world');">Enabled Item</div>
          <div dojoType="dijit.PopupMenuItem" id="submenu2">
              <span>Submenu</span>
              <div dojoType="dijit.Menu">
                          <div dojoType="dijit.MenuItem"
                               onClick="alert('Submenu 1!')">Submenu Item One</div>
                          <div dojoType="dijit.MenuItem"
                               onClick="alert('Submenu 2!')">Submenu Item Two</div>
              </div>
          </div>
  </div>
--->


</body>
</html>
